<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <%@include file="/WEB-INF/includes/css-file.jsp" %>
    <link rel="stylesheet" href="${ctp}/static/css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>
</head>

<body>
<%
    // 设置导航条上的显示
    pageContext.setAttribute("navInfo", "角色维护");
    // 设置点击高亮效果
    pageContext.setAttribute("curUrl", "permission/role/list");
%>
<%@include file="/WEB-INF/includes/navbar.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/includes/sidebar_menu.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i
                            class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button type="button" class="btn btn-primary" style="float:right;"
                            onclick="window.location.href='form.html'"><i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${rolePage.list}" var="role">
                                <tr>
                                    <td>${role.id}</td>
                                    <td><input type="checkbox"></td>
                                    <td>${role.name}</td>
                                    <td>
                                        <button roleId="${role.id}" type="button"
                                                class="btn btn-success btn-xs assignPermissionModelBtn">
                                            <i class=" glyphicon glyphicon-check"></i>
                                        </button>
                                        <button type="button" class="btn btn-primary btn-xs">
                                            <i class=" glyphicon glyphicon-pencil"></i>
                                        </button>
                                        <button type="button" class="btn btn-danger btn-xs">
                                            <i class=" glyphicon glyphicon-remove"></i>
                                        </button>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <ul class="pagination">
                                        <li><a href="${ctp}/permission/role/list?pageNum=1">首页</a></li>
                                        <c:if test="${rolePage.hasPreviousPage}">
                                            <li>
                                                <a href="${ctp}/permission/role/list?pageNum=${rolePage.prePage}">上一页</a>
                                            </li>
                                        </c:if>
                                        <c:forEach items="${rolePage.navigatepageNums}" var="pageNum">
                                            <c:if test="${pageNum == rolePage.pageNum}">
                                                <li class="active">
                                                    <a href="${ctp}/permission/role/list?pageNum=${pageNum}">${pageNum}
                                                        <span class="sr-only">(current)</span>
                                                    </a>
                                                </li>
                                            </c:if>
                                            <c:if test="${pageNum != rolePage.pageNum}">
                                                <li>
                                                    <a href="${ctp}/permission/role/list?pageNum=${pageNum}">${pageNum}</a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        <c:if test="${rolePage.hasNextPage}">
                                            <li>
                                                <a href="${ctp}/permission/user/list?pageNum=${rolePage.nextPage}">下一页</a>
                                            </li>
                                        </c:if>
                                        <li><a href="${ctp}/permission/user/list?pageNum=${rolePage.pages}">末页</a></li>
                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="permissionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">分配权限</h4>
            </div>
            <div class="modal-body">
                <div>
                    <ul id="permissionTree" class="ztree"></ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addPermissionBtn">分配权限</button>
            </div>
        </div>
    </div>
</div>

<%@include file="/WEB-INF/includes/js-file.jsp" %>
<%@include file="/WEB-INF/includes/common-js.jsp" %>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });

    // $("tbody .btn-success").click(function () {
    //     window.location.href = "assignPermission.html";
    // });
    $(".assignPermissionModelBtn").click(function () {
        var options = {
            backdrop: 'static',
            show: true
        }
        // js的this会经常漂移
        initPermissionTree($(this).attr("roleId"));
        // 打开模态框
        $("#permissionModal").modal(options);
        // 打卡模态框将角色id传递给modal里面的权限分配按钮
        $("#addPermissionBtn").attr("roleId", $(this).attr("roleId"));
    })

    // treeId 权限树ul的Id，treeNode是当前节点信息
    function showIcon(treeId, treeNode) {
        // console.log(treeNode);
        // 找到当前元素图标显示的节点，将这个节点的class设置为当前节点的icon
        $("#" + treeNode.tId + "_ico").removeClass();
        $("#" + treeNode.tId + "_ico").before("<span class='" + treeNode.icon + "'></span>");
    }

    function initPermissionTree(roleId) {
        // ztree的一些设置
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid"
                },
                key: {
                    url: "xUrl"
                }
            },
            view: {
                addDiyDom: showIcon
            },
            check: {
                enable: true
            },
        }
        // 从数据库中查出所有权限节点数据
        // 发送ajax请求获取到所有权限的json数据
        $.getJSON("${ctp}/permission/role/getAllPermission", function (zNodes) {
            $.each(zNodes, function () {
                if (this.pid == 0) {
                    this.open = true;
                }
            })
            // 不使用var声明变量的时候，变量是全局对象（window对象）属性，在全局中使用var声明变量是全局变量
            // 把初始化好的ztree对象传递给外界使用，可用通过操作这个对象来改变树
            ztreeObject = $.fn.zTree.init($("#permissionTree"), setting, zNodes);
            // $表示jquery对象，表示对jquery对象添加一个属性，属性叫ztreeObject
            // $.ztreeObject = $.fn.zTree.init($("#permissionTree"), setting, zNodes);
            // document中添加此此属性
            // document.ztreeObject = $.fn.zTree.init($("#permissionTree"), setting, zNodes);

            // 勾选当前角色的权限
            checkCurrentPermission(roleId);
        })
    }

    // 传入角色Id，将当前角色拥有的权限勾选
    function checkCurrentPermission(roleId) {
        // 发送请求查出当前角色拥有的权限树
        $.getJSON("${ctp}/permission/role/permission/" + roleId, function (data) {
            // console.log(ztreeObject);
            // console.log($.ztreeObject);
            // console.log(document.ztreeObject);
            $.each(data, function () {
                var nodeByParam = ztreeObject.getNodeByParam("id", this.id, null);
                // 第一个参数表示要勾选的节点，第二个参数表示勾选与否，第三个参数表示是否和父节点级联互动，
                // 第四个参数表示勾选状态变化后，是否调用之前用（callback)规定的回调函数
                ztreeObject.checkNode(nodeByParam, true, false);
            })
        });
    }

    //  点击分配权限按钮
    $("#addPermissionBtn").click(function () {
        // 获取已经选中的权限
        var checkedNodes = ztreeObject.getCheckedNodes(true);
        // 将权限id和角色id发给程序
        var permissionIds = "";
        $.each(checkedNodes, function () {
            permissionIds += this.id + ",";
        })
        var roleId = $(this).attr("roleId");
        // 使用程序保存这个角色对应的权限的值
        $.get("${ctp}/permission/role/update?roleId=" + roleId + "&permissionIds=" + permissionIds, function () {
            alert("权限分配成功！");
            $("#permissionModal").modal("hide");
        })

    })
</script>
;
</body>
</html>
